<template>
	<view>
		<u-popup :show="show" mode="bottom" overlayOpacity="0.2" @close="close">
			<view
				style="min-height: 70vh;padding: 20rpx;background-color: #f8fafd;max-width: 100%;box-sizing: border-box;display: flex;flex-direction: column;">
				<view class="flex border"
					:style="{'background':'#fff','border-radius':'30rpx','height':'170rpx','padding':'10rpx 20rpx',}">
					<image
						src="https://djpub.imos.dongjiao.cc/upload_qp/img/20240607/069a38f3a78cf4f2c55e6f4ad5ccd2b3.png?x-oss-process=style/fuzhao1"
						class="tech-image"></image>
					<view class="flex-1 flex" style="flex-direction: column;margin-left: 10rpx;">
						<view class="flex-sb">
							<view class="title">
								{{item.name}}
							</view>
							<view class="mark" style="color: #ff7978;">
								5.0
							</view>
						</view>
						<view class="introductory">
							以诚为本！诚恳做事！擅长中式，泰式，法式，采耳！通络培元 手法沉稳娴熟！欢迎下单体验
						</view>

						<view class="flex-sb" style="font-size: 14px;">
							<view class="flex-c-c">
								<u-icon name="checkmark-circle-fill" color="#24c373" size="18"></u-icon>
								实名认证
							</view>
							<view class="flex-c-c">
								<u-icon name="heart-fill" color="#24c373" size="20"></u-icon>
								爽约包赔
							</view>
							<view class="flex-c-c">
								<u-icon name="tags-fill" color="#24c373" size="20"></u-icon>
								相关资质
								<u-icon name="arrow-right" color="#8b8b8b" size="18"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="scroll-box">
					<view v-for="(item,index) in projectList" :key="index" :class="{border:active == item.id}"
						@click="active = item.id"
						style="display: flex;justify-content: flex-start;background-color: #fff;border-radius: 20rpx;margin-bottom: 20rpx;height: 170rpx;box-sizing: border-box;"
						:style="{borderTopRightRadius:index==0?'0':'20rpx',borderTopLeftRadius:index==0?'0':'20rpx'}">
						<view style="margin:0rpx 10rpx;display: flex;align-items: center;">
							<image :src="item.icon" class="project-image"></image>
						</view>
						<view style="width:75%;margin-left: 10rpx;">
							<view
								style="display: flex;justify-content: space-between;align-items: center;margin-top:10rpx">
								<view class="project-title">
									<label>{{item.name}}</label>
									<u-tag v-if="item.tag" type="success" size="mini" :text="item.tag" shape="square"
										bgColor="#edfff1" color="#24c373" borderColor="#edfff1"
										:customStyle="{'margin-left':'10rpx','height':'32rpx','line-height':'32rpx','font-size':'20rpx'}">
									</u-tag>
								</view>
								<view class="num-view">超{{item.num}}人选择</view>
							</view>
							<view
								style="display: flex;justify-content: space-between;align-items: center;margin-top: 10rpx;">
								<view class="project-tips">{{item.tips}}</view>
								<!-- <view class="button-view">选择技师</view> -->
								<u-number-box v-model="item.buycount" @input="changeInput($event,item)" :integer="true"
									:step="1" :min="0" :max="3">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="12" color="#24c373"></u-icon>
									</view>
									<text slot="input" style="width: 15px;text-align: center;"
										class="input">{{item.buycount}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</view>
							<view>
								<view class="project-price">
									<view class="rmb-icon" v-if="false">￥</view>
									<view class="price-true" v-if="false">{{item.original}}</view>
									<view class="price-false" style="color: red;font-weight: bold;">￥{{item.price}}
									</view>
									<view style="margin-left: 20rpx;">
										<u-icon name="clock-fill" size="15" color="#24c373" labelSize="12"
											:label="item.timer+'分钟'" labelColor="#999"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex-sb"
					style="color: #ff7978;background-color: #fff;border-radius: 20rpx;align-items: center;padding: 15rpx 10rpx; ">
					<view class="">
						<text>合计：</text>
						<text>￥{{price}}</text>
					</view>
					<view class="flex-1" />

					<u-button type="success" text=" 提交订单 " style="width: 140rpx;" color="#24c373"
						@click="creatOrder"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "order-pay",
		props: {
			item: {
				default: () => {
					return {}
				},

			},
			show: {
				default: false
			},
			pid: {
				default: null
			}
		},
		created() {
			this.active = this.pid ? this.pid : this.projectList[0].id
		},
		data() {
			return {
				active: null,
				price: 0,
				projectList: [{
						name: '中式按摩',
						icon: '/static/project/a.png',
						tips: '缓解颈椎,腰肌劳损',
						original: '318',
						price: '218',
						num: '26587',
						tag: '',
						timer: '60',
						buycount: 0,
						id: 1

					},
					{
						id: 2,
						name: '泰式SPA',
						icon: '/static/project/d.png',
						tips: '缺乏运动,腰酸背痛',
						original: '498',
						price: '398',
						num: '15195',
						tag: '超值特惠',
						timer: '120',
						buycount: 0
					},
					{
						id: 3,
						name: '通络培元',
						icon: '/static/project/e.png',
						tips: '祛湿通络,激活能量',
						original: '398',
						price: '298',
						num: '80397',
						tag: '',
						timer: '80',
						buycount: 0
					},
					{
						id: 4,
						name: '山城足疗',
						icon: '/static/project/c.png',
						tips: '调理气机,疏经活络',
						original: '298',
						price: '198',
						num: '7433',
						tag: '',
						timer: '60',
						'buycount': 0
					},
					{
						id: 5,
						name: '非遗采耳',
						icon: '/static/project/b.png',
						tips: '静心助眠,缓解压力',
						original: '388',
						price: '238',
						num: '2765',
						tag: '放松解压',
						timer: '90',
						buycount: 0
					}
				]
			};
		},
		methods: {
			changeInput(num, item) {
				this.active = item.id
				this.projectList.forEach(item => item.buycount = 0)
				item.buycount = num
				this.price = item.price * num
			},
			close() {
				this.$emit('close')
			},
			creatOrder() {
				if (this.price === 0) {
					uni.$u.toast('请选择服务项目')
					return
				}
				const item = this.projectList.find(item => item.buycount)
				this.close()
				uni.navigateTo({
					url: '/pages/order/create?order=' + JSON.stringify(item) + "&name=" + this.item.name
				})
				return
				uni.$u.toast(`${item.name}服务，${item.buycount}次，总计${this.price}`)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.border {
		border: 1px solid #24c373 !important;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #24c373;
		color: #24c373;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #24c373;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		margin-right: 15rpx;
	}

	.tech-image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-right: 10rpx;
	}

	.scroll-box {
		height: 55vh;
		margin-top: 10rpx;
		padding-bottom: 20px;
		box-sizing: border-box;
	}

	.introductory {
		flex: 1;
		font-size: 24rpx;
		color: rgb(138, 138, 138);
		line-height: 28rpx;
		word-break: break-word;
	}


	.num-view {
		color: #999;
		font-size: 20rpx;
		/* margin-top: 16rpx; */
		text-align: center;
		margin-right: 20rpx;
	}

	.project-image {
		width: 200rpx;
		height: 155rpx;
		border-radius: 20rpx;
		margin: 10rpx 0rpx;
	}

	.project-title {
		font-weight: bold;
		font-size: 30rpx;
		/* margin-top: 8rpx; */
		display: flex;
		align-items: center;
	}

	.project-tips {
		font-size: 24rpx;
		color: #999;
		height: 40rpx;
		line-height: 40rpx;
		/* margin:8rpx 0rpx; */
	}

	.project-price {
		display: flex;
		align-items: baseline;
		/* margin-top: 10rpx; */
	}

	.button-view {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		background: #24c373;
		color: #fff;
		border-radius: 16rpx;
		font-size: 26rpx;
		margin-right: 10rpx;
		/* margin-top: 30rpx; */
	}
</style>